<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板语法</title>
</head>
<body>

    <div id="vm3">
        <!--新特性,可以用方括号括起来的js表达式作为一个指令的参数-->
        <p v-bind:[atrributeName]="url">..</p>
        <button v-bind:[eventName]="dosomething">...</button>
    </div>

    <div id="vm2">
        <!--原始HTML v-html-->
            <p>Using mustaches: {{ rawHtml }}</p>
            <p>Using v-html directive: <span v-html="rawHtml"></span></p>        
    </div>

    <div id="vm1">
        <!--通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。-->
        <span v-once>这个将不会改变:{{message}}</span>
    </div>
    
    <script src="template.js"></script>
</body>

</html>